<style>
  div.scroll {
    height: 200px;
    width: 300px;
    overflow: auto;
    border: 1px solid #666;
    background-color: #ccc;
    padding: 8px;
  }
</style>

<div><a id="start" href="a"><img src="resources/green.png" width=30 height=30></a></div>
<div class="scroll" id="scrollerA">
  <img src="resources/green.png" width=240 height=300>
</div>

<div class="scroll" id="scrollerB">
  <img src="resources/green.png" width=240 height=300>
</div>
<div><a id="end" href="a"><img src="resources/green.png" width=30 height=30></a></div>
A scroll container should be scrollable even when it contains no focusables.

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  test(function(t) {
      assert_true(internals.runtimeFlags.keyboardFocusableScrollersEnabled);
  }, "Make sure KeyboardFocusableScrollers is set.");

  // We want spatnav to focus the scroller before scrolling
  // or searching inside of it, just like seqnav does.
  var resultMap = [
    ["Down", "scrollerA"],
    ["Down", "scrollerA"],
    ["Down", "scrollerA"],
    ["Down", "scrollerA"],
    ["Down", "scrollerB"],
    ["Down", "scrollerB"],
    ["Down", "scrollerB"],
    ["Down", "scrollerB"],
    ["Down", "end"],
    ["Up"  , "scrollerB"],
    ["Up"  , "scrollerB"],
    ["Up"  , "scrollerB"],
    ["Up"  , "scrollerB"],
    ["Up"  , "scrollerA"],
    ["Up"  , "scrollerA"],
    ["Up"  , "scrollerA"],
    ["Up"  , "scrollerA"],
    ["Up"  , "start"],
  ];

  // Start at a known place.
  document.getElementById("start").focus();
  snav.assertFocusMoves(resultMap);
</script>
